import React, { useState } from 'react';
import { Layout } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import { Avatar } from 'antd';
import "./MyNews.scss"
const { Header, Sider, Content } = Layout;


interface Props { }
function MyNews(props: Props) {
    let [news, setNews] = useState("")
    let [title, setTitle] = useState("无新消息")
    let [show, setShow] = useState(true)








    const headerStyle: React.CSSProperties = {
        // textAlign: 'center',
        color: 'black',
        height: 64,
        paddingInline: 50,
        lineHeight: '64px',
        backgroundColor: '#ffffff',
        fontSize: "18px"
    };

    const contentStyle: React.CSSProperties = {
        // textAlign: 'center',
        minHeight: 120,
        color: 'black',
        backgroundColor: '#f9f9f9',
    };

    const siderStyle: React.CSSProperties = {
        // textAlign: 'center',
        color: 'black',
        backgroundColor: '#ffffff',
    };








    return (
        <div className='mynews'>
            <div className='title'>消息管理</div>
            <Layout className='content'>
                <Sider style={siderStyle}>
                    <div className="card" onClick={() => { setTitle("高启强"); setNews("什么时候去吃鱼!"); setShow(false) }}>
                        <div><Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} /></div>
                        <div>
                            <p className='name'>高启强</p>
                            <p className='news'>什么时候去吃鱼!</p>
                        </div>
                    </div>
                    <div className="card" onClick={() => { setTitle("高启盛"); setNews("风浪越大鱼越贵"); setShow(false) }}>
                        <div><Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} /></div>
                        <div>
                            <p className='name'>高启盛</p>
                            <p className='news'>风浪越大鱼越贵</p>
                        </div>
                    </div>
                    <div className="card" onClick={() => { setTitle("喜羊羊"); setNews("阿里嘎多美羊羊桑"); setShow(false) }}>
                        <div><Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} /></div>
                        <div>
                            <p className='name'>喜羊羊</p>
                            <p className='news'>阿里嘎多美羊羊桑</p>
                        </div>
                    </div>
                    <div className="card" onClick={() => { setTitle("美羊羊"); setNews("沸羊羊,我讨厌你"); setShow(false) }}>
                        <div><Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} /></div>
                        <div>
                            <p className='name'>美羊羊</p>
                            <p className='news'>沸羊羊,我讨厌你</p>
                        </div>
                    </div>
                </Sider>
                <Layout>
                    <Header style={headerStyle}>{title}</Header>
                    <Content style={contentStyle}><span className='contentnews' style={{ display: show ? "none" : 'block' }}>{news}</span></Content>
                </Layout>
            </Layout>
        </div>
    );
}

export default MyNews;